<script lang="tsx" setup>
import { onMounted, reactive, watch } from 'vue'
import { getloopAPI } from '@/api/vulnerability/stat/index'
import { useSearch } from '@/hooks/component'
import { useTablePage1 } from '@/hooks/web'
import { copyText } from '@/utils/copyTextToClipboard'
const emit = defineEmits(['getCveCode'])
const props = defineProps({
  province: {
    type: String,
    required: true,
    default: ''
  }
})
const { table, page, ruleForm, getRecords } = useTablePage1(getloopAPI, {
  ruleForm: {
    province: props.province,
    searchValue: ''
  },
  isMounted: false
})
const { handleSearch } = useSearch('advancedRef', ruleForm, getRecords)

/** 漏洞级别颜色 */
const getVulLevelColor = (riskLevel: string): string => {
  const LevelObject: any = {
    低危: '#008dff',
    中危: '#ffc100',
    高危: '#ff7f00',
    超危: '#ff4c4c'
  }
  return LevelObject[riskLevel] || '#008dff'
}
/** 表格布局 */
const ruleTable = reactive({
  columns: [
    { label: '漏洞名称', prop: 'vulName' },
    {
      label: '漏洞编号',
      render: ({ row }: any) => <span onClick={() => copyText(row.cveCode)} style="cursor: pointer">{row.cveCode || row.cnnvdCode || row.cnvdCode}</span>
    },
    {
      label: '危害等级',
      render: ({ row }: any) => (
        <span style={{ color: getVulLevelColor(row.riskLevel) }}>{row.riskLevel}</span>
      )
    },
    { label: '漏洞类型', prop: 'vulType' }
  ]
})
// 列表点击-上传cvecode
const ClickRow = (e: any) => {
  emit('getCveCode', e.cveCode)
}
const test = (value) => {
  console.log(value.cveCode);

}
// 监听省份变化
watch(
  () => props.province,
  (newProvince) => {
    ruleForm.province = newProvince
    getRecords()
    console.log(ruleForm)
  }
)
// 表格数据加载后抛出第一个cveCode
// watch(
//   () => table.loading,
//   () => {
//     if (!table.loading && table.records.length > 0) {
//       emit('getCveCode', table.records[0].cveCode)
//     }
//   }
// )
watch(
  () => {
    ruleForm.searchValue
  },
  () => {
    console.log(ruleForm)
  }
)
onMounted(() => {
  getRecords()
})
defineExpose({ getRecords })
</script>
<template>
  <div class="jm-bg-color">
    <!-- 列表 -->
    <div class="flex justify-end jm-mb">
      <jmp-search v-model="ruleForm.searchValue" placeholder="请输入漏洞编号" @change="handleSearch('searchValue')" />
    </div>
      <!-- 列表 -->
      <jmp-table :data="table.records" :columns="ruleTable.columns" :loading="table.loading" @row-click="ClickRow" />
      <!-- 分页 -->
      <jmp-pagination v-model:page="page.pageNum" v-model:limit="page.pageSize" v-model:total="page.total" :pager-count='3' :size="'small'"/>
  </div>
</template>
<style lang="scss" scoped></style>
